<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>payage</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/5.3.0/reset.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.21.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-icons/5.0.1/index.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/5.3.0/antd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
      * {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      }
      body {
        margin: 0px;
      }
      .flex {
        display: flex;
      }
      .column {
        flex-direction: column;
      }
      .between {
        justify-content: space-between;
      }
      .center {
        align-items: center;
      }
      .items-end {
        align-items: end;
      }
      .items-center {
        justify-content: center;
      }
      .mb-10 {
        margin-bottom: 10px;
      }
      .mr-5 {
        margin-right: 5px;
      }
      .mt-20 {
        margin-top: 20px;
      }
      .mr-10 {
        margin-right: 10px;
      }
      .pd-5 {
        padding: 5px;
      }
      .pt-10 {
        padding-top: 10px;
      }
      .overflow {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .equal {
        flex: 1;
      }
      .product {
        background-color: #fff;
        height: 90vh;
        border: 1px solid #d8d8d8;
        margin: 10px auto;
        width: 375px;
        position: relative;
      }
      .product-footer {
        width: 375px;
        position: absolute;
        bottom: 0;
        background-color: #f7f7fa;
      }
      .product-header {
        padding: 8.5px 0px 8.5px 8.5px;
      }
      .product-header__span {
        font-size: 0.3rem;
        color: #555;
      }
      .product-details__content {
        padding-top: 15px;
        font-size: 12px;
        color: #464646;
      }
      .product-details__content--item {
        padding: 5px 10px;
        height: 28px;
      }
      .product-details__content--item:last-child {
        border-bottom: 1px dashed #d8d8d8;
      }
      .product-details__sublabel {
        width: 100%;
        color: #a1a1a1;
        font-size: 0.2062rem;
        padding: 0 10px;
      }
      .product-birth {
        padding: 15px;
      }
      .product-birth__span {
        color: #000000;
        flex: 1;
        font-size: 0.3rem;
      }
      .product-birth__btn {
        width: 125px;
        height: 32.5px;
        background-size: 16px 15.5px;
        background-repeat: no-repeat;
        background-position: 100%;
        color: #fff;
        border-radius: 30px;
        background-color: #ff8350;
        border: 1px solid #ff8350;
        opacity: 0.8;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.265rem;
      }
      .product-box {
        width: 100%;
        background-size: 100% 100%;
        padding: 12px 18px;
        height: 175px;
        background-image: url('assets/child.png');
      }
      .product-bar__title {
        font-size: 10px;
        color: #999;
        border: 1px solid #999;
        border-radius: 17.5px;
        padding: 10px 15px;
        line-height: 10px;
        margin-right: 5px;
        white-space: nowrap;
      }
      .product-bar__title-active {
        color: #fd8347;
        border: 1px solid #fd8347;
      }
      .product-footer {
        width: 375px;
        background-color: #f7f7fa;
      }
      .product-pay {
        height: 49px;
        color: #c82727;
        padding: 0 12.5px;
      }
      .product-pay__unit {
        font-weight: 500;
        font-size: 12px;
      }
      .product-pay__btn {
        border: 1px solid #ff8350;
        box-shadow: 0 5px 15px 1px #ff8350;
        background-color: #ff8350;
        border-radius: 15px;
        font-size: 12px;
        line-height: 14px;
        padding: 6px 28px;
        width: 110px;
        white-space: nowrap;
        color: white;
      }
      .active {
        color: #fb834f;
      }
      .security-span {
        font-size: 14px;
        min-width: 70px;
        color: #999;
        white-space: nowrap;
      }
      .pay-box-mid {
        font-size: 14px;
        margin-top: 15px;
        margin-left: 10px;
        margin-right: 10px;
        height: 40px;
        border-bottom: 1px solid #e5e5e5;
      }
      .pay-option-btn {
        margin-left: 30px;
      }
      .pay-box-time {
        margin-left: 10px;
        font-size: 14px;
      }
      .pay-box-message {
        font-size: 14px;
        padding: 15px 10px;
        height: 50px;
        background-color: #f6f6f8;
      }
      .pay-box-project {
        width: 240px;
        height: 32px;
      }
      .pay-box-sex {
        width: 130px;
        height: 32px;
      }
      .pay-sex-btn {
        margin: 1px 10px 5px 0;
        padding: 14px 20px;
        text-align: center;
        line-height: 13px;
        width: auto;
        font-size: 13px;
        border-radius: 16px;
        color: #999;
        border: 1px solid #999;
      }
      .pay-sex-btn-active {
        border-radius: 16px;
        color: #fd8347;
        border: 1px solid #fd8347;
      }
      .pay-input {
        font-size: 14px;
        border-style: none;
      }
      input::-webkit-input-placeholder {
        color: rgba(153, 153, 153, 0.71);
      }
      input:-moz-placeholder {
        color: rgba(153, 153, 153, 0.71);
      }
      input::-moz-placeholder {
        color: rgba(153, 153, 153, 0.71);
      }
      input:-ms-input-placeholder {
        color: rgba(153, 153, 153, 0.71);
      }
      .date-pick {
        width: 19px;
        height: 19px;
        /* background-image: url(`${window.location.origin}/static/img/cdc/datapicker_icon.png`); */
        background-repeat: no-repeat;
        background-position: 0;
        background-size: contain;
        margin-left: 10px;
        margin-right: 10px;
      }
      .arrow {
        width: 10px;
        height: 15px;
        background-size: 100% 100%;
        /* background-image: url(`${window.location.origin}/static/img/cdc/extend-icon.png`); */
        transform: rotate(90deg);
        transition: all 0.4s;
      }
      .security {
        font-size: 13px;
        padding: 10px;
      }
      .security-img {
        width: 13px;
        height: 13px;
        margin-right: 4px;
      }
      .security-option {
        white-space: nowrap;
      }
      .security-title {
        color: #fb834f;
        white-space: nowrap;
        margin: 0 3px;
      }
      .security-line {
        font-size: 13px;
        color: #999;
      }
      .security-popup__content .ant-tabs-tab {
        padding: 12px 0px 0px 12px !important;
      }
      .ant-tabs .ant-tabs-tab {
        justify-content: center;
      }
      .ant-tabs .ant-tabs-ink-bar {
        background: rgb(255, 131, 80);
      }
      .security-popup__content .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
        margin-bottom: 10px;
        color: #ff8350;
      }
      .security-popup__content .ant-tabs .ant-tabs-tab-btn {
        color: #666;
        margin-bottom: 10px;
      }
      .security-popup__content--inner {
        padding: 0px 12px;
        overflow: auto;
        height: 440px;
      }
      .security-popup__content--btn {
        width: 325px;
        bottom: 3%;
        left: 50%;
        transform: translateX(-50%);
        position: fixed;
        background: #ff8350;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        line-height: 30px;
        border: 1px solid #ff8350;
      }
      .ant-drawer .ant-drawer-content {
        border-top-left-radius: 7px;
        background-color: #fff;
        border-top-right-radius: 7px;
      }
      p {
        margin: 0px !important;
      }
      .security-popup__content--inner::-webkit-scrollbar {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="text/babel">
    const { antd } = window
    const { Drawer, Tabs, Input } = antd
    const { RightOutlined, CloseOutlined, DownOutlined, SearchOutlined } = icons
    const { useEffect, useState } = React

    function SecurityLabel({ details, config, clause }) {
      const checkbox =
        ''
      return (
        <>
          <div className='security flex center'>
            <img src={checkbox} alt='' className='security-img' />
            <span className='security-span'>同意并确认</span>
            <div className='security-option flex center'>
              <span className='security-title'>投保须知</span>
              <p className='security-line'>|</p>
              <span className='security-title'>投保声明</span>
              <p className='security-line'>|</p>
              <span className='security-title'>责任免除</span>
              <p className='security-line'>|</p>
              <span className='security-title'>保险条款</span>
              <p className='security-line'>|</p>
            </div>
          </div>
        </>
      )
    }

    function Pay() {
      const [startDate, setStartDate] = useState()
      const [endDate, setEndDate] = useState()
      const [applicantName, setApplicantName] = useState()
      const [certificateNo, setCertificateNo] = useState()
      const [mobileNo, setMobileNo] = useState()
      const [insuredName, setInsuredName] = useState()
      const [gender, setGender] = useState()
      const [planName, setPlanName] = useState()
      const [birthDate, setBirthDate] = useState()
      const [planNameList, setPlanNameList] = useState()
      const [productDetail, setProductDetail] = useState()
      const [money, setMoney] = useState()
      const [step, setStep] = useState(0)
      const [businessNo, setBusinessNo] = useState()
      const [policyNo, setPolicyNo] = useState()

      const date_picker = `${window.location.origin}/static/img/cdc/datapicker_icon.png`
      const extend = `${window.location.origin}/static/img/cdc/extend-icon.png`

      const handleLoaded = () => {
        return new Promise((resolve, reject) => {
          html2canvas(document.querySelector('.product'))
            .then(canvas => {
              resolve(canvas.toDataURL())
              // canvas 是截图后生成的 Canvas 对象
            })
            .catch(err => {
              console.error(err)
            })
        })
      }

      const postSrcMsg = () => {
        clearTimeout(timer)
        let timer = setTimeout(async () => {
          let src = await handleLoaded()
          let msg = {
            src: src
          }
          parent.postMessage(msg, '*')
        }, 1000)
      }

      useEffect(() => {
        const messageHandle = event => {
          if (!businessNo && event.data.businessNo) {
            setBusinessNo(event.data.businessNo)
          } else if (!policyNo && event.data.policyNo) {
            setPolicyNo(event.data.policyNo)
          }
          if (event.data.step) {
            setStep(event.data.step)
          }
        }
        const loadedHandle = event => {
          const data = {
            loaded: true
          }
          clearTimeout(timer)
          let timer = setTimeout(async () => {
            let src = await handleLoaded()
            parent.postMessage(src, '*')
          }, 1000)
          parent.postMessage(data, '*')
        }
        window.addEventListener('load', loadedHandle)
        window.addEventListener('message', messageHandle)
        return () => {
          window.removeEventListener('load', loadedHandle)
          window.removeEventListener('message', messageHandle)
        }
      }, [step, businessNo])

      useEffect(() => {
        const loadedHandle = event => {
          const data = {
            loaded: true
          }
          parent.postMessage(data, window.location.href)
        }
        window.addEventListener('load', loadedHandle)
        const init = async () => {
          let {
            data: {
              data: {
                productModel,
                startDate,
                endDate,
                applicantName,
                certificateNo,
                mobileNo,
                insuredName,
                gender,
                planName,
                birthDate,
                insurancePeriod
              }
            }
          } = await axios.get(
            `https://cdc.testsaas.bodajianyu.com/api/policy/getPolicyMsg${businessNo ? '?businessNo=' + businessNo : '?policyNo=' + policyNo}`
          )
          setProductDetail(productModel)
          const planNameList = productModel.skuAttributes.filter(item => item.attributeName === 'plan')
          const list = productModel?.items.filter(item => {
            return item.itemName === planName && item.insurancePeriod === insurancePeriod.substring(0, 1)
          })
          setPlanNameList(planNameList)
          setBirthDate(birthDate)
          setStartDate(startDate)
          setEndDate(endDate)
          setMoney(list[0].price)

          setPlanName(planName)
          switch (step) {
            case 12:
              setApplicantName(applicantName)
              postSrcMsg()
              break
            case 13:
              setCertificateNo(certificateNo)
              postSrcMsg()
              break
            case 14:
              setMobileNo(mobileNo)
              postSrcMsg()
              break
            case 15:
              setInsuredName(insuredName)
              postSrcMsg()
              break
            case 16:
              setGender(gender)
              postSrcMsg()
              break
            case 16:
              break
          }
        }
        if (businessNo || policyNo) init()
        return () => {
          window.removeEventListener('load', loadedHandle)
        }
      }, [businessNo, step, policyNo])

      const coverageList = [
        {
          label: '残疾补偿金',
          value: '180万元',
          coverageId: 10421,
          open: true,
          subLabel:
            '在本保险期限内，由被保险人的监护对象（被监护人）造成第三者人身伤亡或财产损失，依法应由被保险人承担赔偿责任时，保险人根据本保险合同的规定负责赔偿。（每次事故免赔额500元）'
        },
        {
          label: '医疗费用',
          value: '100元/天',
          coverageId: 10422,
          open: true,
          subLabel:
            '在本保险期限内，由被保险人的监护对象（被监护人）造成第三者人身伤亡或财产损失，依法应由被保险人承担赔偿责任时，保险人根据本保险合同的规定负责赔偿。（每次事故免赔额500元）'
        },
        {
          label: '住院津贴',
          value: '100元/天',
          coverageId: 10423,
          open: true,
          subLabel:
            '在本保险期限内，由被保险人的监护对象（被监护人）造成第三者人身伤亡或财产损失，依法应由被保险人承担赔偿责任时，保险人根据本保险合同的规定负责赔偿。（每次事故免赔额500元）'
        },
        {
          label: '住院伙食补助',
          value: '100元/天',
          coverageId: 10424,
          open: false,
          subLabel:
            '在本保险期限内，由被保险人的监护对象（被监护人）造成第三者人身伤亡或财产损失，依法应由被保险人承担赔偿责任时，保险人根据本保险合同的规定负责赔偿。（每次事故免赔额500元）'
        },
        {
          label: '事故保险金',
          value: '25万元',
          coverageId: 10425,
          open: true,
          subLabel:
            '在本保险期限内，由被保险人的监护对象（被监护人）造成第三者人身伤亡或财产损失，依法应由被保险人承担赔偿责任时，保险人根据本保险合同的规定负责赔偿。（每次事故免赔额500元）'
        },
        {
          label: '事故补偿金',
          value: '80万元',
          coverageId: 10426,
          open: true,
          subLabel:
            '在本保险期限内，由被保险人的监护对象（被监护人）造成第三者人身伤亡或财产损失，依法应由被保险人承担赔偿责任时，保险人根据本保险合同的规定负责赔偿。（每次事故免赔额500元）'
        },
        {
          label: '免疫失效医疗费用',
          value: '12万元',
          coverageId: 10427,
          open: false,
          subLabel:
            '在本保险期限内，由被保险人的监护对象（被监护人）造成第三者人身伤亡或财产损失，依法应由被保险人承担赔偿责任时，保险人根据本保险合同的规定负责赔偿。（每次事故免赔额500元）'
        }
      ]

      const showCoverageList = false
      const CarefreeContent = () => {
        return (
          <div className='product-details__content'>
            {coverageList.map(({ label, value, subLabel, coverageId, open }) => (
              <>
                <div className='product-details__content--item flex between' key={label}>
                  <div>{label}</div>
                  <div className='flex center'>
                    <span className='mr-10'>{value}</span>
                    {open ? <RightOutlined /> : <DownOutlined />}
                  </div>
                </div>
                <div className='product-details__sublabel' style={{ display: open ? 'none' : '' }}>
                  {subLabel}
                </div>
              </>
            ))}
          </div>
        )
      }

      return (
        <>
          <div className='product'>
            <div className='pay-box-mid flex center'>
              <div className='security-span'>选择保障</div>
              <div className='pay-box-project flex'>
                {planNameList?.map(item => (
                  <div className={`${planName === item.attributeValue ? 'product-bar__title-active' : ''} flex center product-bar__title`}>
                    {item.attributeValue}
                  </div>
                ))}
              </div>
              <div className='pay-option-btn arrow flex center active' style={{ backgroundImage: `url(${extend})` }}></div>
            </div>
            {showCoverageList ? <CarefreeContent /> : <></>}
            <div className='pay-box-mid flex center'>
              <div className='security-span'>保障期限</div>
              <span className='pay-box-time'>
                {startDate} 至 {endDate} 24时
              </span>
            </div>
            <div className='pay-box-message'>
              <span className='center'>父母信息</span>
            </div>
            <div className='pay-box-mid flex center'>
              <div className='security-span flex center'>姓名</div>
              <div className='flex'>
                <Input placeholder='请输入本人姓名' bordered={false} value={applicantName} />
              </div>
            </div>
            <div className='pay-box-mid flex center'>
              <div className='security-span flex center'>身份证</div>
              <div className='flex'>
                <Input placeholder='请输入本人证件号码' bordered={false} value={certificateNo} />
              </div>
            </div>
            <div className='pay-box-mid flex center'>
              <div className='security-span flex center'>手机号</div>
              <div className='flex'>
                <Input placeholder='请输入本人手机号' bordered={false} value={mobileNo} />
              </div>
            </div>
            <div className='pay-box-message'>
              <span className='center'>宝宝信息</span>
            </div>
            <div className='pay-box-mid flex center'>
              <div className='security-span flex center'>姓名</div>
              <div className='flex'>
                <Input placeholder='请输入宝宝姓名' bordered={false} value={insuredName} />
              </div>
            </div>
            <div className='pay-box-mid flex center'>
              <div className='security-span flex center'>出生日期</div>
              <div className='flex'>
                <span className='date-pick' style={{ backgroundImage: `url(${date_picker})` }}></span>
                <span className='security-span'>{birthDate}</span>
              </div>
            </div>
            <div className='pay-box-mid flex center'>
              <div className='security-span flex center'>性别</div>
              <div className='pay-box-sex flex'>
                <div className={`pay-sex-btn ${gender === 'M' ? 'pay-sex-btn-active' : ''} flex center `}>男</div>
                <div className={`pay-sex-btn ${gender === 'F' ? 'pay-sex-btn-active' : ''} flex center `}>女</div>
              </div>
            </div>
            <div className='product-footer'>
              {productDetail && (
                <SecurityLabel details={productDetail.details} config={productDetail.config} clause={productDetail.clause}></SecurityLabel>
              )}
              <div className='product-pay flex between center'>
                <div className=''>
                  <span className='product-pay__unit'>￥</span>
                  <span style={{ fontSize: '23px', width: '44px', fontWeight: '500', marginRight: '6px' }}>888</span>
                  <span style={{ fontSize: '12px', fontWeight: '500' }}>.00</span>
                </div>
                <button className='product-pay__btn'>立即投保</button>
              </div>
            </div>
          </div>
        </>
      )
    }

    ReactDOM.render(<Pay />, document.getElementById('root'))
  </script>
</html>
